<template>
  <div class="login-content">
    <img class="logo" src="../assets/logo.jpeg" />
    <van-form @submit="onSubmit">
      <van-field
        label="姓名"
        name="name"
        v-model="name"
        :rules="[{ required: true, message: '请输入姓名' }]"
        placeholder="姓名"
      />
      <van-field
        label="工号"
        name="idCard"
        v-model="idCard"
        :rules="[
          {
            required: true,
            message: '请输入工号'
          }
        ]"
        placeholder="工号"
      />

      <div class="btn padding">
        <van-button
          :disabled="!name.length || !idCard.length"
          class="btn-color"
          size="large"
          >查询</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>

export default {
  name: "login",
  data() {
    return {
      name: "",
      idCard: ""
    };
  },
  methods: {
    onSubmit() {
      const _that = this;
      _that.$router.push({
        path: "/attendance-result",
        query: {
          name: _that.name,
          user_id: _that.idCard
        }
      });
    }
  }
};
</script>

<style scoped>
.btn-color {
  background: rgb(100, 34, 37);
  color: #fff;
}
.login-content {
  padding-top: 15%;
}
.padding {
  padding: 40px 15px;
}
.logo {
  display: block;
  margin: 0 auto;
  margin-bottom: 10%;
  width: 200px;
  height: 125px;
}
</style>
